<template>
  <view class="category">
    <!-- 1.0 导航栏 -->
    <nav-bar></nav-bar>

    <!-- 2.0 内容盒子 -->
    <view class="main">
      <!-- 2.1左侧数据 -->
      <view class="left">
        <view
          class="item"
          :class="{ active: currentTab === index }"
          v-for="(item, index) in leftList"
          :key="index"
          @click="changeTab(index)"
        >
          {{ item }}
        </view>
      </view>

      <!-- 2.1右侧数据 -->
      <scroll-view class="right" scroll-y :scroll-top="scrollTop">
        <view class="right_item" v-for="item in rightList" :key="item.cat_id">
          <view class="right_title">
            <text> / </text>
            <text>{{ item.cat_name }}</text>
            <text> / </text>
          </view>
          <view class="right_product">
            <navigator
              class="right_product_item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
              :url="'/pages/good_list/index?id=' + item2.cat_id"
              open-type="navigate"
            >
              <image :src="item2.cat_icon" mode="widthFix" />
              {{ item2.cat_name }}
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/Navbar";

// 当前页面中 全局变量 接口的数据
let allData = [];

export default {
  components: {
    NavBar
  },

  data() {
    return {
      categoryList: [], //分类列表数据
      leftList: [], //左侧的tab栏数据
      rightList: [], //右侧商品数据
      currentTab: 0, //左侧tab栏切换标识
      scrollTop: 0 //竖向滚动条位置
    };
  },
  onLoad() {
    // 1.判断缓存是否有数据
    const category = uni.getStorageSync("category") || null;
    //  1.1 如果有值
    if (category) {
      // 判断数据有没有过期，过期时间，自定义一分钟 =60s ，60s*1000
      if ([Date.now() - category.time] > 60 * 1000) {
		  this.getcategoryList();
      } else {
        //  1.2 如果有缓存就取缓存渲染
        allData = category.list;

        // 存放左侧的tab栏数据['大家电','热门推荐']
        this.leftList = allData.map(v => v.cat_name);

        // 大家电对应的商品数据 数组
        this.rightList = allData[0].children;
      }
    } else {
      //   如果没有值

      this.getcategoryList();
    }
  },
  methods: {
    getcategoryList() {
      uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"
        })
        .then(res => {
          console.log(res);
          allData = res[1].data.message;

          //  将数据存储到缓存中
          uni.setStorageSync("category", { time: Date.now(), list: allData });

          // 存放左侧的tab栏数据['大家电','热门推荐']
          this.leftList = allData.map(v => v.cat_name);

          // 大家电对应的商品数据 数组
          this.rightList = allData[0].children;
        });
    },

    changeTab(index) {
      // 设置左侧tab栏切换标识
      this.currentTab = index;

      // 右侧商品数据
      this.rightList = allData[index].children;

      // 设置竖向滚动条位置
      this.scrollTop = Math.random();
    }
  }
};
</script>

<style lang="scss">
.category {
  // 100vh的高度在小程序内代表除去顶部固定宽度+底部bar
  height: 100vh;
  display: flex;
  flex-direction: column;

  .main {
    flex: 1;
    display: flex;
    overflow: hidden; //内容会被修剪，并且其余内容是不可见的

    .left {
      width: 182rpx; // 宽度定死
      overflow: auto; //如果内容被修剪，则小程序会显示滚动条以便查看其余的内容。

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
      }

      .active {
        font-weight: 700;
        font-size: 32rpx;
        color: $uni-theme-color;
        border-left: 6rpx solid $uni-theme-color;
      }
    }

    .right {
      flex: 1;
      overflow: auto; //如果内容被修剪，则小程序会显示滚动条以便查看其余的内容。

      .right_item {
        padding: 20rpx 0;
        .right_title {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10rpx 0;
          font-size: 28rpx;
          font-weight: 700;

          text {
            padding: 0 6rpx;
          }
        }

        .right_product {
          display: flex;
          flex-wrap: wrap;

          .right_product_item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 33.33%;
            padding: 20rpx;
            font-size: 24rpx;

            image {
              width: 70%;
            }
          }
        }
      }
    }
  }
}
</style>
